<template name="location_log">
<view style="display: flex;    height: 100%;">
		<view class="box-infos font12  " >
			<view class="content-box-setting">
				<view class="top-but search-box">
					<text selectable="true"  class="tipss">所有员工账号的手机程序登录位置日志(留存15天)</text>
					<view @click="$common.noMultipleClicks('loadData',loadData,true)" class="rightButttom">
						刷新
					</view>
				</view>
				<view class="boxsss40" style="display: flex;">
					<map
					style="width: 100%;height: 100%;"
					:longitude="$routeData.getLatlng().longitude"
					:latitude="$routeData.getLatlng().latitude"
					:markers="markers"
					:include-points="include_points.length ? include_points:[{longitude:$routeData.getLatlng().longitude,latitude:$routeData.getLatlng().latitude}]"
					@callouttap="callouttap"
					>
					</map>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import person_admin from "@/components/user/list.vue"
	export default {
		components: {
			person_admin
		},
		data() {
			return {
				markers:[],
				include_points:[],
			}
		},
		onLoad() {
			this.loadData()
		},
		created() {
			this.loadData()
		},
		methods: {
			selectUser(item){
				if(item.id){
					this.loadData(true,item.id)
				}
			},
			// 修改后的loadData方法
			loadData(isUpdatePage = true , select_uid='') {
				var that = this
				that.$common.get_request(
					{
						type:'get_location_log',
						user_id:select_uid
					},
					(res)=>{
						var temp = [];
						for(var i=0;i<res.list.length;i++){
							var item = res.list[i]

							temp.push( that.createMarkersUser(
									{ latitude: parseFloat(item.latitude), longitude: parseFloat(item.longitude)},
									i+1,
									'/static/map/dingwei.png',
									`用户：${item.name}\n使用时间：${item.time}`,
								)
							)
						}
						this.markers = temp
						this.include_points = temp
				})
			},

			/**
			 * 创建用户标记点 
			 * */
			createMarkersUser(location, user_id, avatar, callout_content) {
				console.log("11",location)
				return {
					id: parseFloat(user_id),
					...location,
					iconPath: avatar,
					width: 30,
					height: 30,
					anchor: { x: 0.5, y: 1 }, // 关键修复：x轴居中，y轴底部对齐
					callout: {
						textAlign: 'center',
						bgColor: '#002c3e',
						color: '#fff',
						content: callout_content,
						display: 'BYCLICK',//ALWAYS
						borderRadius: 10,
						padding: 6,
						fontSize: 12
					},
					animation: 'fadeIn 0.5s'
				}
			},
		},
	}
</script>

<style>
	.pagesHeaderhBox{
		position: absolute;
		background-color: #eee;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	/* 新增样式 */
	.stats-panel {
		position: absolute;
		top: 0px;
		right: 20px;
		background: rgba(255,255,255,0.95);
		padding: 15px;
		border-radius: 8px;
		z-index: 999;
		box-shadow: 0 2px 12px rgba(0,0,0,0.1);
	}
	.stats-item {
		display: flex;
		align-items: center;
		margin: 5px 0;
	}
	.stats-title {
		font-weight: bold;
		color: #e40318;
		margin-bottom: 10px;
		text-align: center;
	}
	.stats-item {
		display: flex;
		align-items: center;
		margin: 8px 0;
	}
	.color-block {
		width: 16px;
		height: 16px;
		border-radius: 8px;
		margin-right: 8px;
	}
	.stats-label {
		color: #666;
		margin-right: 8px;
		min-width: 80px;
	}
	.stats-value {
		color: #333;
		font-weight: bold;
	}
	.color-dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		margin-right: 8px;
	}
	.map-legend {
		position: absolute;
		bottom: 20px;
		right: 20px;
		background: rgba(255,255,255,0.95);
		padding: 10px;
		border-radius: 8px;
		z-index: 999;
	}
	.legend-item {
		display: flex;
		align-items: center;
		padding: 6px 10px;
		margin: 4px 0;
		border: 2px solid transparent;
		border-radius: 6px;
		cursor: pointer;
	}
	.legend-item:hover{
		border: 2px solid #e40318;
	}
	.color-block {
		width: 20px;
		height: 20px;
		border-radius: 4px;
		margin-right: 8px;
	}
	.legend-text {
		font-size: 12px;
		color: #333;
	}
	.stats-value-count{
		margin-left: auto;
		border-radius: 50%;
		padding: 3px;
		font-size: 12px;
		color: #fff;
		margin-right: -10px;
	}
</style>
